import { format } from 'date-fns';
import { useContext, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import BackButton from 'src/component/BackButton';
import Pagination from 'src/component/Pagination';
import { ThemeContext } from 'src/context/ThemeContext';
import { usePagination } from 'src/hook/usePagination';
// import { Announcement as AnnouncementData } from 'src/model/Announcement';
import { openSnackbar } from 'src/redux/uiSlice';
// import { getAnnouncementList } from 'src/service/announcementService';
import { getNotice } from 'src/service/sysConfigService';
import { Page } from 'src/constant/Page';
import style from './Announcement.module.scss';

type AnnouncementData = any

const Announcement = () => {
    const { t } = useTranslation();
    const dispatch = useDispatch();
    const { IcEmpty } = useContext(ThemeContext).image;
    const navigate = useNavigate();
    const [announcementList, setAnnouncementList] = useState<AnnouncementData[]>([]);
    const [allDatas, setAllDatas] = useState<AnnouncementData[]>([]);
    const { limit, offset, setCount, paginationProps } = usePagination();
    const token = localStorage.getItem("token")
    useEffect(() => {
        getNotice({
            top: "50",
            token: token
        }).then(res => {
            if (res.success) {
                setAllDatas(res.list);
                setCount(res.list.length);
            }
        })
    }, [limit]);

    const onClick = (id: string) => () => {
        navigate(Page.Announcement + '/' + id);
    };

    useEffect(() => {
        if (allDatas.length < 0) return
        let len = offset + limit
        let data = allDatas.slice(offset, len)
        setAnnouncementList(data);
    }, [offset, limit, allDatas])

    return (
        <div>
            <BackButton />
            <div className={style.headingBlock}>
                <div className={style.heading}>公告</div>
            </div>
            {announcementList.length === 0 && (
                <div className={style.noData}>
                    <img src={IcEmpty} />
                    No Record
                </div>
            )}
            {announcementList.length > 0 && (
                <div>
                    <div className={style.table}>
                        {announcementList.map((v, i) => (
                            <div key={v.FID}>
                                <div className={style.item} onClick={onClick(v.FID)}>
                                    <div className={style.title}>
                                        {/* {v.readAt === null && <div className={style.unread} />} */}
                                        <div>{v.FGgBt}</div>
                                    </div>
                                    <div>{format(Date.parse(v.FAddtime), 'yyyy-MM-dd HH:mm')}</div>
                                </div>
                                {announcementList.length - 1 > i && <div className={style.divider} />}
                            </div>
                        ))}
                    </div>
                    <div className={style.pagination}>
                        <Pagination {...paginationProps} />
                    </div>
                </div>
            )}
        </div>
    );
};

export default Announcement;